<template>
    <nav>
      <div class="wrap">
        <div class="logo">
           <div class="logo-image"></div>
        </div>
       <ul>
        <li v-for="(item,index) in navTitle" 
        :key="index" :style="item.label === activeItem && 'backgroundColor:#000;color:#fff;'" 
        @click="navClick(item.label)"> 
          {{
            item.title
          }}
            <sub class="cor" v-show="item.label === activeItem">&nbsp;</sub>
            <sup class="hot" v-show="item.title === '下载客户端'">&nbsp;</sup>
        </li>
       </ul>
      <div class="search">
        <input type="text" :placeholder="searchPlaceHolder">
      </div>
         <div class="framer" @click="createCenter">创作者中心</div>
         <a href="javascript:void(0)" @click="login">登录</a>
      </div>
    </nav>
</template>

<script>
 export default {
        props : {
           navTitle:{
               type : Array,
               required : true,
               default : [] 
           },
           activeItem : {
                 type: String,
                 required : true,
                 default : 'findMusic'
           },
           searchPlaceHolder : {
                type : String,
                require : false,
                default : '音乐/视频/电台/用户'
           }
        },
        methods:{
          navClick(label){
            this.$emit('activeClickHandle',label)
          },
          login(){
            this.$emit('loginHandler')
          },
          createCenter(){
            this.$emit('createCenterHandler')
          }
        }
    }
</script>

<style lang="scss" scoped>

 nav{
    display: flex;
    width: 100%;
    height: 70px;
    background-color: #242424;
    align-items: center;
    justify-content: center;
    .wrap{
      display: flex;
      width: 1100px;
      height: 100%;
      align-items: center;
    .logo{
      width: 176px;
      height: 69px;
      cursor: pointer;
      .logo-image{
        width: 157px;
        height: 100%;
        background: 100% no-repeat;
        background-image: url('@/assets/image/topbar.png');
        background-position: 0 0;
      }
    }
    ul{
      height: 100%;
      margin-left: 20px;
      display: flex;
      li{
        padding: 0 19px;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #ccc;
        position: relative;
        cursor: pointer;
        &:hover{
          background-color: #000;
          color: #fff;
        }
        .cor{
            display: block;
            position: absolute;
            left: 50%;
            top: 64px;
            width: 12px;
            height: 7px;
            background: url('@/assets/image/topbar.png') no-repeat 0 9999px;
            margin-left: -6px;
            overflow: hidden;
            background-position: -226px 0;
        }
        .hot{
          background: url('@/assets/image/topbar.png') no-repeat 0 9999px;
          display: block;
          position: absolute;
          top: 21px;
          left: 100px;
          width: 28px;
          height: 19px;
          background-position: -190px 0;
        }
      }
    }
    .search{
      border-radius: 32px;
      width: 158px;
      height: 32px;
      background: url('@/assets/image/topbar.png') no-repeat;
      background-position: 0 -99px;
      background-color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
    margin-left: 75px;
     input{
      width: 75%;
      margin-left: 25px;
      font-size: 12px;
     }
    }
    .framer{
      width: 90px;
    height: 32px;
    margin-left:12px;
    box-sizing: border-box;
    padding-left: 16px;
    border: 1px solid #4F4F4F;
    background-position: 0 -140px;
    line-height: 33px;
    color: #ccc;
    border-radius: 20px;
    font-size: 12px;
    cursor: pointer;
    &:hover{
     border-color: #fff;
      color: #fff;
    }
    }
    a{
      margin-left: 20px;
      font-size: 12px;
      color: #787878;
      &:hover{
        color: #999;
        text-decoration: underline;
      }
    }
   }
 
 }
</style>